import Vue from 'vue'
import Router from 'vue-router'
// 路由懒加载
// import FirstPage from '../views/FirstPage.vue'
// import BookSystem from '../views/BookSystem.vue'
import User from '../views/User.vue'
import AddFrom from '../views/AddForm.vue'
import UpdateForm from '../views/UpdateForm.vue'
import List from '../views/List.vue'
// 若设置history 模式后 用户在收到地址栏手动输入一个没有设置的路由均会将页面
import All from '../views/All.vue'
import UserCd from '../views/UserCd.vue'

Vue.use(Router) //use()调用插件的install方法
// 导出Router的第一种写法
// export default new Router({
// 导出Router的第二种写法
 const VueRouter= new Router({
  // vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL
  // 不想要很丑的 hash，我们可以用路由的 history 模式
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/bookSystem'
    },
    {
      path: '/firstPage',
      //  component:FirstPage
      // 路由懒加载
      component: () => import('../views/FirstPage.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/bookSystem',
      //  component:BookSystem,
      component: () => import('../views/BookSystem.vue'),
      name: 'bookSystem',
      children: [
        {
          path: '/bookSystem',
          redirect: '/bookSystem/list'
        },
        {
          path: '/bookSystem/list',
          component: List,
          name: 'list'
        },
        {
          path: '/bookSystem/addFrom',
          component: AddFrom,
          name: 'addFrom',
          // beforeEnter: (to, from, next) => {
          //   console.log(to)
          //   console.log(from)
          //   next()
          //   console.log('路由守卫beforeEnter')
          // }
        }
      ]
    },
    {
      path: '/user',
       component:User,
      //路由懒加载  注 括号里除路径外 其余都不许放
      // component: () => import('../views/User.vue'),
      children: [
        {
          path: '/user/:id',
          component: UserCd
        }
      ]
    },
    {
      path: '/updateForm',
      name: 'updateForm',
      component: UpdateForm
    },
    {
      // 配置所有地址栏手动输入一个未配置的路由显示的界面（防止出现404）
      path: '*',
      component: All
    }
  ],

  // 异步滚动 即当页面存在滚动条时 用路由组件跳转时
  //  虽然页面跳转 但不会回到顶部位置 所以利用异步滚动 可以根据页面跳转然后回到顶部
      // scrollBehavior (to, from, savedPosition) {
      //   return new Promise((resolve, reject) => {
      //     setTimeout(() => {
      //       resolve({ x: 0, y: 0 })
      //     }, 500)
      //   })
      // },
      
})
// 路由元信息未成功 因为auth这个函数是判断是否登录的需自己配置  但可以筛选到没有meta的路由返回值确实为3
//   VueRouter.beforeEach((to, from, next) => {
//   if (to.matched.some(record => record.meta.requiresAuth)) {
//     // this route requires auth, check if logged in
//     // if not, redirect to login page.
//     if (!auth.loggedIn()) {
//       next({
//         path: '/login',
//         query: { redirect: to.fullPath }
//       })
//       console.log(1)
//     } else {
//       next()
//       console.log(2)
//     }
//   } else {
//     next() // 确保一定要调用 next()
//     console.log(3)
//   }
// })
export default VueRouter
